<template>
	<view>
		<view style="width:60%;margin:auto">
			<fui-segmented-control color="#FFDD00" activeColor="#000" :values="HengshuTabs"
				@click="changeHengshu"></fui-segmented-control>
		</view>
		<view>
			<fui-tabs :tabs="templateLists[currentTabIndex].Class" :current="tweLevelTabIndex" :short="false" size="24"
				selectedSize="26" isSlider scroll alignLeft selectedColor="#000" sliderBackground="#FFDD00"
				@change="changeClass"></fui-tabs>
		</view>
		<view>
			<swiper :current="tweLevelTabIndex" :duration="300" @change="tabChange" style="height:88vh">
				<swiper-item v-for="page in templateLists[currentTabIndex].Class.length" :key="page">
					<scroll-view scroll-y style="height:88vh">
						<view v-for="(item, index) in currentTemplateList" :key="index" @click="selectPics(index)">
							<view class="picTitle">{{ item.MokaTemplateName }}</view>

							<view v-if="item.ResultImage"
								style="display: flex;justify-content: center;align-items: center;">
								<image :src="item.ResultImage"
									:style="{width: item.MokaWidth*item.MokaTempRate+'rpx', height: item.MokaHeight*item.MokaTempRate+'rpx'}">
								</image>
							</view>

							<view class="" v-else>
								<view
									:style="{margin: 'auto',width: item.MokaWidth*item.MokaTempRate+'rpx', height: item.MokaHeight*item.MokaTempRate+'rpx', backgroundColor: '#FFF', padding: item.MokaPadding*item.MokaTempRate+'rpx', position: 'relative',boxShadow:'0rpx 0rpx 13rpx 0rpx #dadada'}">

									<view v-if="currentTabIndex == 0"
										:style="{position: 'absolute',top:item.TitleBoxTop*item.MokaTempRate + 'rpx',left:item.TitleBoxLeft*item.MokaTempRate + 'rpx' ,width: item.TextBoxWidth*item.MokaTempRate+'rpx', fontSize: item.TitleSize*item.MokaTempRate+'rpx', color: item.TitleColor,textAlign:currentTabIndex == 0 && tweLevelTabIndex == 3 || tweLevelTabIndex == 4? 'center': '',zIndex: '999'}">
										{{ JSON.parse(item.TextJson).title }}
									</view>

									<!-- 环绕式顶部文字 由于盒子嵌套问题所有放这 -->
									<view v-if="currentTabIndex === 0 && tweLevelTabIndex === 3"
										:style="{position:'absolute', top:item.HeadlineTop*item.MokaTempRate + 'rpx', left:item.HeadlineLeft*item.MokaTempRate + 'rpx', fontSize:item.HeadlineSize*item.MokaTempRate + 'rpx', color: item.HeadlineColor, zIndex:'99' }">
										<text>{{ item.Headline }}</text>
									</view>

									<view
										:style="{width: item.TextBoxWidth*item.MokaTempRate+'rpx', height: item.TextBoxHeight*item.MokaTempRate+'rpx', 'background-color': item.TextBoxBackgroundColor, position: 'absolute', top: item.TextBoxTop*item.MokaTempRate + 'rpx', left: item.TextBoxLeft*item.MokaTempRate + 'rpx',zIndex:'99'}">

										<!-- 竖版文字-->
										<view v-if="currentTabIndex === 1 "
											:style="{padding:item.TextBoxPadding*item.MokaTempRate+'rpx', textAlign: 'center',width: item.TextBoxWidth*item.MokaTempRate+'rpx', height: item.TextBoxHeight*item.MokaTempRate+'rpx',top:item.TextBoxTop*item.MokaTempRate+'rpx'}">

											<view
												:style="{width: item.TextBoxWidth*item.MokaTempRate+'rpx', fontSize: item.TitleSize*item.MokaTempRate+'rpx', color: item.TitleColor,textAlign:'center',zIndex: '999'}">
												{{ JSON.parse(item.TextJson).title }}
											</view>
											<text v-for="(itm,idx) in JSON.parse(item.TextJson).memo" :key="idx"
												:style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,marginRight: '10rpx'}">
												{{ itm.key }}: {{ itm.value }}
											</text>
										</view>

										<!-- 侧边式文字 || 插入式文字 -->
										<view
											v-if="currentTabIndex === 0 && (tweLevelTabIndex === 0 || tweLevelTabIndex === 1)"
											:style="{padding:item.TextBoxPadding*item.MokaTempRate+'rpx',paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',lineHeight:item.TextLineHeight*item.MokaTempRate+'rpx'}">

											<view v-for="(itm,idx) in JSON.parse(item.TextJson).memo" :key="idx" :style="{
													fontSize: item.MemoSize*item.MokaTempRate  + 'rpx',
													color: item.MemoColor, width:item.TextWidth*item.MokaTempRate+'rpx',
													height:item.TextHeight*item.MokaTempRate+'rpx',
													marginTop:'8rpx',
												}">
												<view
													:style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left top': ''}">
													{{ itm.key }}
												</view>
												<view
													:style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left bottom': '',	marginTop:platformStyle != 1?'8rpx':''}">
													{{ itm.value }}
												</view>
											</view>
										</view>

										<!-- 底部式文字 -->
										<view v-if="currentTabIndex === 0 && tweLevelTabIndex === 2"
											:style="{transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left center': '',whiteSpace:'nowrap'}">
											<view v-for="(itm, idx) in JSON.parse(item.TextJson).memo" :key="idx"
												:style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,marginRight: '20rpx',display:'inline-block'}">
												<view>{{ itm.key }}</view>
												<view>{{ itm.value }}</view>
											</view>
										</view>


										<!-- 环绕式文字 -->
										<!-- <view class="surround"  v-if="currentTabIndex === 0 && tweLevelTabIndex === 3"  :style="{padding:item.TextBoxPadding*item.MokaTempRate+'rpx'}">
											
											<view :style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,display:'flex',justifyContent:'space-around'}" >
												<view class=""
													v-for="(itm, idx) in  JSON.parse(item.TextJson).memo" :key="idx" 
													v-if="itm.en == 'HEIGHT' || itm.en == 'WEIGHT'"
													:style="{
														paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',
														paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',
														transform:platformStyle == 1? 'scale(0.6)': '',
														transformOrigin:platformStyle == 1?'left center': '',
														flex: '1',
														textAlign:'center'
													}
												">
													<text  :style="{marginLeft:itm.en == 'WEIGHT'? '10rpx': ''}">
														{{ itm.key }}:{{ itm.value}}{{itm.en == 'HEIGHT'? 'cm': 'kg'}}
													</text>
												</view>
											</view>
										</view> -->

										<view class="surround" v-if="currentTabIndex === 0 && tweLevelTabIndex === 3">

											<view
												:style="{fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,whiteSpace:'nowrap'}">
												<view class="" v-for="(itm, idx) in  JSON.parse(item.TextJson).memo"
													:key="idx" v-if="itm.en == 'HEIGHT' || itm.en == 'WEIGHT'" :style="{
														paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',
														paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx',
														flex: '1',
														textAlign:'center',
														display:'inline-block',
														marginLeft:itm.en == 'WEIGHT'? '10rpx': '',
														transform:platformStyle == 1? 'scale(0.6)': '',
														transformOrigin:platformStyle == 1?'center': ''
													}
												">
													{{ itm.key }}:{{ itm.value}}{{itm.en == 'HEIGHT'? 'cm': 'kg'}}
												</view>
											</view>
										</view>


										<!-- 悬浮式文字 -->
										<view v-if="currentTabIndex === 0 && tweLevelTabIndex === 4"
											:style=" {fontSize: item.MemoSize*item.MokaTempRate+'rpx', color: item.MemoColor,width:item.TextBoxWidth*item.MokaTempRate + 'rpx',display:'flex',justifyContent:'center',alignItems:'center',flexWrap:'wrap',paddingLeft: item.TextBoxPaddingLeft*item.MokaTempRate+'rpx',paddingTop: item.TextBoxPaddingTop*item.MokaTempRate+'rpx'}">
											<!-- {{item.MemoSize*item.MokaTempRate}} -->

											<text v-for="(itm, idx) in JSON.parse(item.TextJson).memo" :key="idx"
												:style="{width:item.TextWidth*item.MokaTempRate+'rpx',height:item.TextHeight*item.MokaTempRate+'rpx',textAlign: 'left',transform:platformStyle == 1? 'scale(0.6)': '',transformOrigin:platformStyle == 1?'left center': ''}">{{ itm.key }}:{{ itm.value }}</text>
										</view>
									</view>

									<view
										:style="{position: 'absolute', width: item.PicBoxWidth*item.MokaTempRate+'rpx', height: item.PicBoxHeight*item.MokaTempRate+'rpx', top: item.PicBoxTop*item.MokaTempRate+'rpx', left: item.PicBoxLeft*item.MokaTempRate+'rpx', backgroundColor: item.PicBoxBackgroundColor}">
										<view v-for="(itm, idx) in item.TemplatePics" :key="idx"
											:style="{width: itm.PicWidth*item.MokaTempRate+'rpx', height: itm.PicHeight*item.MokaTempRate+'rpx', position: 'absolute', top: itm.PicTop*item.MokaTempRate+'rpx', left: itm.PicLeft*item.MokaTempRate+'rpx', backgroundColor: '#666', overflow: 'hidden'}">
											<image :src="itm.PicSrc" mode="widthFix"
												:style="{width:'100%',position:'relative',top: itm.ImgTop*item.MokaTempRate+'rpx', left: itm.ImgLeft*item.MokaTempRate+'rpx'}">
										</view>
									</view>
								</view>
							</view>

						</view>
						<view class="" style="height: 100rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getMokaTemplateList
	} from '@/api/moka.js'
	export default {
		data() {
			return {
				LoginInfo: {},
				templateTypeID: 0,
				HengshuTabs: [{
						id: 1,
						name: '横版'
					},
					{
						id: 2,
						name: '竖版'
					}
				],
				mokaStyle: 1,
				currentTabIndex: 0,
				templateLists: [],
				currentTemplateList: [],
				// mokaTempRate: 1,
				mokaTemplate: {},
				tempFiles: [],
				tempLength: 0,
				startX: 0,
				startY: 0,
				currentIndex: -1,
				tweLevelTabIndex: 0,
				// tabList: [],
				// isTabIndex: false
				platformStyle: 0,
			};
		},
		onLoad(option) {
			this.templateTypeID = option.templateTypeID;
			this.currentTabIndex = 0;
			this.onGetList();


			uni.getSystemInfo({
				success: (res) => {
					if (res.platform == 'android') this.platformStyle = 1;
					if (res.platform == 'ios') this.platformStyle = 0;
				}
			})
		},
		onShow() {},
		methods: {
			onGetList() {

				getMokaTemplateList({
					templateTypeID: this.templateTypeID
				}).then(res => {
					// console.log('MokaList', res);
					if (res.code == 200) {
						this.templateLists = res.data;
						if (this.templateLists.length != 0) {
							this.templateLists[0].Class.forEach((item, index) => {
								item.Template.forEach(itm => {
									if (Number(itm.MokaTempListRate) != 0) {
										itm.MokaTempRate = itm.MokaTempListRate
									}
								})
							})
							this.templateLists[1].Class.forEach((item, index) => {
								item['index'] = index;

								item.Template.forEach(itm => {
									if (Number(itm.MokaTempListRate) != 0) {
										itm.MokaTempRate = itm.MokaTempListRate
									}
								})
							})
						}

						// console.log('this.templateLists[0].Class' , this.templateLists[0].Class)
						this.currentTemplateList = this.templateLists[this.currentTabIndex].Class[0].Template;

						// console.log('currentTemplateList', this.templateLists);
					}

				});
			},
			changeHengshu(e) {
				// console.log('changeHengshu', e)
				// this.templateTypeID = e.id;
				this.tweLevelTabIndex = 0;
				this.currentTabIndex = e.index;
				this.mokaStyle = e.id;
				this.currentTemplateList = this.templateLists[this.currentTabIndex].Class[0].Template;
				// this.onGetList()
			},

			tabChange(e) {
				this.tweLevelTabIndex = e.detail.current;
			},
			changeClass(e) {
				this.currentTemplateList = e.Template;
				this.tweLevelTabIndex = e.index;

				// this.tabList.push(0,1,2,3,4,5,6,7,8,9,10) 
				// this.tabList.forEach((item,index) =>{
				// 	if (e.index === index ) this.isTabIndex = true
				// })
				// if(this.tabList && this.tabList.length >= 2) {
				// 	this.tabList.splice(0,1)
				// }
				// console.log('this.tabList', this.tabList.includes(this.tweLevelTabIndex))

				// 测试数据
				// this.currentTemplateList.forEach((item) =>{
				// 	item.TextJson = '{"memo": [{"key": "性别", "value": "男"}, {"key": "身高", "value": "172"}, {"key": "体重", "value": "48"}, {"key": "胸围", "value": "83"}, {"key": "腰围", "value": "60"}, {"key": "臀围", "value": "86"}], "title": "YIYI"}'
				// })

				// console.log('currentTemplateList', this.currentTemplateList);
			},
			makeMoka(index) {
				uni.navigateTo({
					url: '/moka/pages/mokaSelectPic?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.currentTemplateList[index].MokaTemplateID
				})
			},
			selectPics(index) {
				// return;

				this.mokaTemplate = this.currentTemplateList[index];
				this.mokaTemplateID = this.mokaTemplate.MokaTemplateID

				let _that = this;

				// console.log('imageCount', _that.mokaTemplate.TemplatePics.length);

				uni.chooseMedia({
					count: _that.mokaTemplate.TemplatePics.length,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						// console.log('res.tempFiles.length' , res.tempFiles)
						if (res.tempFiles.length < _that.mokaTemplate.TemplatePics.length) {
							uni.showToast({
								title: '照片数量不足，请选择' + _that.mokaTemplate.TemplatePics.length + '张照片',
								icon: 'none'
							})
							return false;
						} else {
							_that.setPics(-1, res.tempFiles)
						}
					}
				})
			},
			setPics(index, tempFiles) {
				// console.log('tempFiles', tempFiles)

				if (index == -1) {
					this.tempFiles = tempFiles
					// console.log(this.tempFiles)
					this.tempLength = this.tempFiles.length
				} else {

					this.tempFiles.splice(index, 1, tempFiles[0]);
				}

				uni.setStorageSync("tempMoka", this.tempFiles);
				let tabData = {
					tweLevelTabIndex: this.tweLevelTabIndex,
					currentTabIndex: this.currentTabIndex
				}
				// console.log('tabData' , tabData)
				uni.setStorageSync("tabData", tabData)

				uni.navigateTo({
					url: '/moka/pages/mokaMakeTarget?style=' + this.mokaStyle + '&mokaTemplateID=' + this
						.mokaTemplateID
				})

				// console.log('this.tempFiles', this.tempFiles)
			},
		}
	}
</script>

<style lang="scss">
	.picTitle {
		margin: 20rpx;
		padding: 5rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-left: 5rpx solid #FFDD00;
	}

	.picDemo {
		width: 100%;
		height: 300rpx;
		background-color: #CCC;
	}

	.surround {
		text-align: center;
	}
</style>